<template>
  <div style="height: 100%">
    <div class="main-tab">
      <x-header id="header" slot="header" :left-options="{showBack: false}" >
        <x-icon type="ios-arrow-back" slot="left" style="fill:#fff;" @click="back"></x-icon>
        <span slot="default" class="header-tit">{{user.nickname}}</span>
      </x-header>
      <div class="main-headerAndTab">
        <group gutter="0">
          <cell-box>
            <div class="user-info">
              <div class="info-top">
                <div class="avatarAndlevel">
                  <img :src="user.avatar" class="avatar">
                  <div class="level"><span>LV.{{user.level}}</span></div>
                </div>
                <div class="info-right">
                  <div class="right-top">
                    <div class="follow">
                      <span class="num1">{{user.attentionCount}}</span><span class="focus1">关注</span>
                    </div>
                    <div class="follow">
                      <span class="num1">{{user.fansCount}}</span><span class="focus1">粉丝</span>
                    </div>
                    <div class="follow">
                      <span class="num1">{{user.collectCommentCount}}</span><span class="focus2">收藏与评论</span>
                    </div>
                  </div>
                  <div class="right-bottom">
                    <div class="click">
                      <x-button mini type="primary" class="button1" v-if="isFollow === 0" @click.native="editUserRelation(user.id)">关注</x-button>
                      <x-button mini type="default" class="button3" plain v-if="isFollow === 1" @click.native="editUserRelation(user.id)">已关注</x-button>
                    </div>
                    <div class="click">
                      <x-button  type="default" class="button2" plain @click.native="blacklisted(user.id)">加入黑名单</x-button>
                    </div>
                    <div class="click">
                      <img src="../../../static/icon/article-share.png" alt="">
                    </div>
                  </div>
                </div>
              </div>
              <div class="message">
                <div class="icon"><img src="../../../static/icon/nanxing.png" alt=""></div>
                  <div class="msg-content"><span>快来介绍一下你自己吧~~~</span></div>
              </div>
            </div>
          </cell-box>
        </group>
        <div class="tab">
          <tab bar-active-color="#AD2532" :line-width="2" custom-bar-width="1.43rem" active-color="#AD2532" default-color="#9B9B9B">
            <tab-item selected  active-class="active-1" @click.native="handle1">文章</tab-item>
            <tab-item  active-class="active-1" @click.native="handle2">收藏</tab-item>
          </tab>
        </div>
        <div class="main" v-show="show1">
          <div class="main-left">
            <group class="group" v-for="(item,index) in articlelist" :key="item.id" v-if="index %2 === 0" @click.native="articledetail(item.id)">
              <div class="art-top">
                <img :src="item.pictureArray" alt="">
                <span class="content">{{item.content}}</span>
              </div>
              <div class="art-bottom">
                <div class="bottom1">
                  <img :src="item.avatar" alt="">
                  <span class="name">{{item.nickname}}</span>
                </div>
                <div class="bottom2">
                  <span class="date">{{item.createTime.substring(0,10)}}</span>
                  <div class="yuedu">
                    <img src="../../../static/icon/yuedu-3.png" alt="">
                    <span class="num">{{item.readCount}}</span>
                  </div>
                </div>
              </div>
            </group>
          </div>
          <div class="main-right">
            <group class="group" v-for="(item,index) in articlelist" :key="item.id" v-if="index %2 === 1" @click.native="articledetail(item.id)">
              <div class="art-top">
                <img :src="item.pictureArray" alt="">
                <span class="content">{{item.nickname}}</span>
              </div>
              <div class="art-bottom">
                <div class="bottom1">
                  <img :src="item.avatar" alt="">
                  <span class="name">{{item.nickname}}</span>
                </div>
                <div class="bottom2">
                  <span class="date">{{item.createTime.substring(0,10)}}</span>
                  <div class="yuedu">
                    <img src="../../../static/icon/yuedu-3.png" alt="">
                    <span class="num">{{item.readCount}}</span>
                  </div>
                </div>
              </div>
            </group>
          </div>
        </div>
        <div class="main" v-show="show2">
          <div class="main-left">
            <group class="group" v-for="(item,index) in collectArticleList" :key="item.id" v-if="index %2 === 0" @click.native="articledetail(item.id)">
              <div class="art-top">
                <img :src="item.pictureArray" alt="">
                <span class="content">{{item.content}}</span>
              </div>
              <div class="art-bottom">
                <div class="bottom1">
                  <img :src="item.avatar" alt="">
                  <span class="name">{{item.nickname}}</span>
                </div>
                <div class="bottom2">
                  <span class="date">{{item.createTime.substring(0,10)}}</span>
                  <div class="yuedu">
                    <img src="../../../static/icon/yuedu-3.png" alt="">
                    <span class="num">{{item.readCount}}</span>
                  </div>
                </div>
              </div>
            </group>
          </div>
          <div class="main-right">
            <group class="group" v-for="(item,index) in collectArticleList" :key="item.id" v-if="index %2 === 1" @click.native="articledetail(item.id)">
              <div class="art-top">
                <img :src="item.pictureArray" alt="">
                <span class="content">{{item.nickname}}</span>
              </div>
              <div class="art-bottom">
                <div class="bottom1">
                  <img :src="item.avatar" alt="">
                  <span class="name">{{item.nickname}}</span>
                </div>
                <div class="bottom2">
                  <span class="date">{{item.createTime.substring(0,10)}}</span>
                  <div class="yuedu">
                    <img src="../../../static/icon/yuedu-3.png" alt="">
                    <span class="num">{{item.readCount}}</span>
                  </div>
                </div>
              </div>
            </group>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {cookie } from 'vux'
  import {getUserDetail,getUserArticleList,getUserCollectArticleList,editUserRelation,blacklisted} from '@/api/user'
  import {getArticleDetail} from '@/api/forum'
    export default {
      inject:['reload'],
        name: "userpage",
      methods:{
        back(){
          this.$router.go(-1)
        },
        getUserDetail(){
          getUserDetail(this.globalData.articleCid).then(res =>{
            console.log(res)
            this.user=res;
          })
        },
        getUserArticleList(){
          getUserArticleList(this.globalData.articleCid).then(res =>{
            console.log(res)
            this.articlelist=res.data;
          })
        },
        getUserCollectArticleList(){
          getUserCollectArticleList(this.globalData.articleCid).then(res =>{
            console.log(res)
            this.collectArticleList=res.data;
          })
        },
        handle1(){
          this.show1=true;
          this.show2=false;
        },
        handle2(){
          this.show1=false;
          this.show2=true;
        },
        getArticleDetail(){
          this.articleId=this.globalData.articleId;
          this.cid=JSON.parse(cookie.get('userInfo')).id;
          getArticleDetail({
            id:this.articleId,
            cid:this.cid
          }).then(res =>{
            console.log(res)
            this.isFollow=res.isFollow;
          })
        },
        editUserRelation(id){
          this.cid=JSON.parse(cookie.get('userInfo')).id;
          editUserRelation({
            cid:id,
            toUserId:this.cid
          }).then(res =>{
            if (res === 1){
              this.$vux.toast.show({
                text:'关注成功！',
                type:'success',
                time: 300
              })
            }
            if (res ===0){
              this.$vux.toast.show({
                text:'已取关！',
                type:'success',
                time: 300
              })
            }
            this.reload()
          })
        },
        blacklisted(id){
          this.cid=JSON.parse(cookie.get('userInfo')).id;
          blacklisted({
            toUserId: this.cid,
            cid:id
          }).then(res =>{
            console.log(res)
            this.$vux.toast.show({
              text:'拉黑成功！',
              type:'success',
              time: 300
            })
            this.reload()
          })
        }
      },
      data(){
          return{
            user:'',
            articlelist:[],
            collectArticleList:[],
            show1:true,
            show2:false,
            isFollow:'',
            articleId:'',
            cid:''
          }
      },
      created(){
          this.getUserDetail();
          this.getUserArticleList();
          this.getUserCollectArticleList();
          this.getArticleDetail();
      }
    }
</script>

<style scoped>
  .header-tit{
    margin-top: 0.2rem;
  }
  #header{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
  }
  .info-top{
    display: flex;
    flex-direction: row;
  }
  .avatarAndlevel{
    display: flex;
    flex-direction: column;
  }
  .avatar{
    width: 5.71rem;
    height: 5.71rem;
    background: #FFFFFF;
    border: 1px solid #F4F4F4;
    border-radius: 50%;
  }
  .level{
    border: 1px solid #AD2532;
    border-radius: 4px;
    width: 2.5rem;
    height: 1.07rem;
    font-size: 12px;
    color: #AD2532;
    letter-spacing: -0.29px;
    text-align: center;
    margin-left: 1.6rem;
    margin-top: 0.36rem;
  }
  .info-right{
    display: flex;
    flex-direction: column;
    margin-left: 1.93rem;
  }
  .right-top{
    display: flex;
    flex-direction: row;
  }
  .follow{
    display: flex;
    flex-direction: column;
    margin-right: 3.39rem;
  }
  .num1{
    font-size: 17px;
    color: #030303;
    letter-spacing: -0.41px;
    text-align: center;
  }
  .focus1{
    width: 2rem;
    font-size: 14px;
    color: #030303;
    letter-spacing: -0.34px;
    text-align: center;
  }
  .focus2{
    width: 4.93rem;
    font-size: 14px;
    color: #030303;
    letter-spacing: -0.34px;
    text-align: center;
  }
  .right-bottom{
    display: flex;
    flex-direction: row;
    margin-top: 2.5rem;
  }
  .click{
    margin-right: 1.07rem;
  }
  .button1{
    border-radius: 99px;
    background: #AD2532;
    width: 6.43rem;
    height: 2.14rem;
  }
  .button3{
    border-radius: 99px;
    background: #FFFFFF;
    width: 6.43rem;
    height: 2.14rem;
    font-size: 14px;
    color: #848484;
    letter-spacing: -0.34px;
    line-height: 1rem;
    text-align: center;
  }
  .button2{
    background: #FFFFFF;
    border-radius: 99px;
    width: 7.1rem;
    height: 2.14rem;
    font-size: 14px;
    color: #848484;
    letter-spacing: -0.34px;
    line-height: 1rem;
    text-align: center;
  }
  .click img{
    width: 1.43rem;
    height: 1.43rem;
    margin-top: 0.36rem;
  }
  .tab{
    background: #FFFFFF;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.02), 0 2px 4px 0 rgba(173,37,50,0.05);
  }
  .message{
    margin-top: 0.79rem;
    display: flex;
    flex-direction: row;
  }
  .icon{
    margin-right: 1.5rem;
  }
  .icon img{
    width: 1.07rem;
    height: 1.07rem;
  }
  .msg-content span{
    font-size: 14px;
    color: #9B9B9B;
    letter-spacing: -0.34px;
    text-align: justify;
  }
  .active-1{
    font-family: "PingFangSC-Semibold",serif;
    font-size: 18px;
    color: #AD2532;
    letter-spacing: 0;
    text-align: center;
  }
  .main{
    width: 100%;
    padding-top: 13px;
    display: flex;
    flex-direction: row;
  }
  .main .main-left{
    width: 50%;
    display: flex;
    flex-direction: column;
  }
  .group{
    width: 11.79rem;
    margin-left: 1.07rem;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.03), 0 4px 8px 0 rgba(0,0,0,0.05);
  }
  .art-top{
    display: flex;
    flex-direction: column;
  }
  .art-top img{
    width: 11.79rem;
  }
  .content{
    margin-left: 0.71rem;
    margin-top: 0.71rem;
    margin-right: 0.71rem;
    margin-bottom: 0.71rem;
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: -0.34px;
    text-align: justify;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
  .art-bottom{
    display: flex;
    flex-direction: column;
  }
  .bottom1{
    margin-left: 0.71rem;
    display: flex;
    margin-bottom: 0.35rem;
    flex-direction: row;
  }
  .bottom1 img{
    width: 1.79rem;
    height: 1.79rem;
    border-radius:50%;
    border: 1px solid #F4F4F4;
  }
  .name{
    font-size: 12px;
    color: #848484;
    letter-spacing: -0.29px;
    text-align: justify;
    margin-left: 0.35rem;
    margin-top: 0.5rem;
  }
  .bottom2{
    display: flex;
    justify-content: space-between;
    margin-left: 0.71rem;
    margin-bottom: 0.72rem;
  }
  .date{
    font-size: 12px;
    color: #9B9B9B;
    letter-spacing: 0.14px;
    text-align: center;
  }
  .yuedu{
    display: flex;
    margin-right: 0.35rem;
  }
  .bottom2 img{
    width: 1.07rem;
    height: 1.21rem;
  }
  .num{
    font-size: 12px;
    color: #9B9B9B;
    letter-spacing: 0.14px;
    text-align: center;
    margin-left: 0.35rem;
  }
</style>
